<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
<head>
  <meta charset="UTF-8">
  <title>Creating a Theme</title>
  <link data-turbolinks-track="true" href="../../assets/application-b86a2086c99917c6bf2a9d74b4038381.css" media="all" rel="stylesheet" />
  <script data-turbolinks-track="true" src="../../assets/application-c3106c6fe52ccec6f26495730a478cca.js"></script>
  <meta content="authenticity_token" name="csrf-param" />
<meta content="yzXUiWH6GiCHbvbJOg7usjzA7LawyxwB+oJHEcWTOIM=" name="csrf-token" />
  <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-3769691-35', 'atom.io');
  ga('send', 'pageview');

</script>

  <meta property="og:url" content="https://atom.io/" />
<meta property="og:site_name" content="Atom" />
<meta property="og:title" content="A hackable text editor for the 21st Century" />
<meta property="og:description" content="At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it." />
<meta property="og:type" content="website" />
<meta property="og:author" content='https://www.facebook.com/GitHub' />
<meta property="og:image" content="http://og.github.com/atom-logo/atom-logo@1200x1200.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="1200" />
<meta property="og:image" content="http://og.github.com/atom-mark/atom-mark@1200x630.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

  <meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:site" content="@AtomEditor" />
<meta property="twitter:creator" content='@github' />
<meta property="twitter:title" content="Atom" />
<meta property="twitter:description" content="A hackable text editor for the 21st Century" />
<meta property="twitter:image:src" content="http://og.github.com/atom-logo/atom-logo@1200x630.png" />
<meta property="twitter:image:width" content="1200" />
<meta property="twitter:image:height" content="630" />

  <link rel="shortcut icon" href="../../favicon.ico"/>
</head>
<body>

  <div class="footer-push">
    
    

    <header class="header">
  <div class="wrapper">
    <h1 title="Atom">
      <a href="../../index.html" class="logo"></a>
    </h1>

    <ul class="navigation">
      <li><a class="" href="../../packages.html">Packages</a></li>
      <li><a class="is-selected" href="../latest/index.html">Documentation</a></li>
      <li><a href="http://blog.atom.io">Blog</a></li>
      <li><a href="../../faq.html">FAQ</a></li>
      <li><a class="" href="https://atom.io/contact">Contact</a></li>
    </ul>
  </div>
</header>


    <div class="wrapper documents content-push">
  <div class="columns">
    <div class="column main-column markdown">
        <h1>
<a name="creating-a-theme" href="creating-a-theme.html#creating-a-theme"></a>Creating a Theme</h1>

<p>Atom's interface is rendered using HTML, and it's styled via <a href="https://atom.io/docs/v0.61.0/a%20superset%0Aof%20CSS">LESS</a>. Don't worry if you haven't heard of LESS before; it's just like CSS,
but with a few handy extensions.</p>

<p>Atom supports two types of themes: <em>UI</em> and <em>syntax</em>.  UI themes style
elements such as the tree view, the tabs, drop-down lists, and the status bar.
Syntax themes style the code inside the editor.</p>

<p>Themes can be installed and changed from the settings view which you can open
by selecting the <em>Atom &gt; Preferences...</em> menu and navigating to the <em>Themes</em>
section on the left hand side.</p>

<h2>
<a name="getting-started" href="creating-a-theme.html#getting-started"></a>Getting Started</h2>

<p>Themes are pretty straightforward but it's still helpful to be familiar with
a few things before starting:</p>

<ul>
<li>LESS is a superset of CSS, but it has some really handy features like
variables. If you aren't familiar with its syntax, take a few minutes
to <a href="https://speakerdeck.com/danmatthews/less-css">familiarize yourself</a>.</li>
<li>You may also want to review the concept of a <em><a href="creating-a-package.html">package.json</a></em>, too. This file
is used to help distribute your theme to Atom users.</li>
<li>Your theme's <em>package.json</em> must contain a <code>"theme"</code> key with a value
of <code>"ui"</code> or <code>"syntax"</code> for Atom to recognize and load it as a theme.</li>
<li>You can find existing themes to install or fork on <a href="https://atom.io/docs/v0.61.0/atomio">atom.io</a>.</li>
</ul><h2>
<a name="creating-a-syntax-theme" href="creating-a-theme.html#creating-a-syntax-theme"></a>Creating a Syntax Theme</h2>

<p>Let's create your first theme.</p>

<p>To get started, hit <code>cmd-shift-P</code>, and start typing "Generate Syntax Theme" to
generate a new theme package. Select "Generate Syntax Theme," and you'll be
asked for the path where your theme will be created. Let's call ours <em>motif</em>.</p>

<p>Atom will pop open a new window, showing the <em>motif</em> theme, with a default set
of folders and files created for us. If you open the settings view (<code>cmd-,</code>)
and navigate to the <em>Themes</em> section on the left, you'll see the <em>Motif</em> theme
listed in the <em>Syntax Theme</em> drop-down. Select it from the menu to activate it,
now when you open an editor you should see that your new <em>motif</em> theme in
action.</p>

<p>Open up <em>stylesheets/colors.less</em> to change the various colors variables which
have been already been defined. For example, turn <code>@red</code> into <code>#f4c2c1</code>.</p>

<p>Then open <em>stylesheets/base.less</em> and modify the various selectors that have
been already been defined. These selectors style different parts of code in the
editor such as comments, strings and the line numbers in the gutter.</p>

<p>As an example, let's make the <code>.gutter</code> <code>background-color</code> into <code>@red</code>.</p>

<p>Reload Atom by pressing <code>cmd-alt-option-L</code> to see the changes you made reflected
in your Atom window. Pretty neat!</p>

<h2>
<a name="creating-an-interface-theme" href="creating-a-theme.html#creating-an-interface-theme"></a>Creating an Interface Theme</h2>

<p>Interface themes <strong>must</strong> provide a <code>ui-variables.less</code> file which contains all
of the variables provided by the <a href="theme-variables.html">core themes</a>.</p>

<p>To create an interface UI theme, do the following:</p>

<ol>
<li>Fork one of the following repositories:

<ul>
<li><a href="https://github.com/atom/atom-dark-ui">atom-dark-ui</a></li>
<li><a href="https://github.com/atom/atom-light-ui">atom-light-ui</a></li>
</ul>
</li>
<li>Clone the forked repository to the local filesystem</li>
<li>Open a terminal in the forked theme's directory</li>
<li>Open your new theme in a Dev Mode Atom window run <code>atom --dev .</code> in the
terminal or use the <em>View &gt; Developer &gt; Open in Dev Mode</em> menu)</li>
<li>Change the name of the theme in the theme's <code>package.json</code> file</li>
<li>Run <code>apm link</code> to symlink your repository to <code>~/.atom/packages</code>
</li>
<li>Reload Atom using <code>cmd-alt-ctrl-L</code>
</li>
<li>Enable the theme via <em>UI Theme</em> drop-down in the <em>Themes</em> section of the
settings view</li>
<li>Make changes! Since you opened the theme in a Dev Mode window, changes will
be instantly reflected in the editor without having to reload.</li>
</ol><h2>
<a name="development-workflow" href="creating-a-theme.html#development-workflow"></a>Development workflow</h2>

<p>There are a few of tools to help make theme development faster and easier.</p>

<h3>
<a name="live-reload" href="creating-a-theme.html#live-reload"></a>Live Reload</h3>

<p>Reloading by hitting <code>cmd-alt-ctrl-L</code> after you make changes to your theme is
less than ideal. Atom supports <a href="https://github.com/atom/dev-live-reload">live updating</a> of styles on Dev Mode
Atom windows.</p>

<p>To enable a Dev Mode window:</p>

<ol>
<li>Open your theme directory in a dev window by either going to the
<strong>View &gt; Developer &gt; Open in Dev Mode</strong> menu or by hitting the <code>cmd-shift-o</code>
shortcut</li>
<li>Make a change to your theme file and save it. Your change should be
immediately applied!</li>
</ol><p>If you'd like to reload all the styles at any time, you can use the shortcut
<code>cmd-ctrl-shift-r</code>.</p>

<h3>
<a name="developer-tools" href="creating-a-theme.html#developer-tools"></a>Developer Tools</h3>

<p>Atom is based on the Chrome browser, and supports Chrome's Developer Tools. You
can open them by selecting the <em>View &gt; Toggle Developer Tools</em> menu, or by
using the <code>cmd-alt-i</code> shortcut.</p>

<p>The dev tools allow you to inspect elements and take a look at their CSS
properties.</p>

<p><img src="https://f.cloud.github.com/assets/69169/1347391/2d51f91c-36af-11e3-806f-f7b334af43e9.png" alt="devtools-img"></p>

<p>Check out Google's <a href="https://developers.google.com/chrome-developer-tools/docs/elements">extensive tutorial</a> for a short
introduction.</p>

<h3>
<a name="atom-styleguide" href="creating-a-theme.html#atom-styleguide"></a>Atom Styleguide</h3>

<p>If you are creating an interface theme, you'll want a way to see how your theme
changes affect all the components in the system. The <a href="https://github.com/atom/styleguide">styleguide</a> is a page that
renders every component Atom supports.</p>

<p>To open the styleguide, open the command palette (<code>cmd-shift-P</code>) and search for
<em>styleguide</em>, or use the shortcut <code>cmd-ctrl-shift-g</code>.</p>

<p><img src="https://f.cloud.github.com/assets/69169/1347390/2d431d98-36af-11e3-8f8e-3f4ce1e67adb.png" alt="styleguide-img"></p>
    </div>
    <div class="column sidebar documents-toc">
      <select class="js-doc-version-switcher version-switcher">
  <option value="v0.69.0">v0.69.0</option>
<option value="v0.68.0">v0.68.0</option>
<option value="v0.67.0">v0.67.0</option>
<option value="v0.66.0">v0.66.0</option>
<option value="v0.65.0">v0.65.0</option>
<option value="v0.64.0">v0.64.0</option>
<option value="v0.63.0">v0.63.0</option>
<option value="v0.62.0">v0.62.0</option>
<option selected="selected" value="v0.61.0">v0.61.0</option>
<option value="v0.60.0">v0.60.0</option>
<option value="v0.59.0">v0.59.0</option>
<option value="v0.58.0">v0.58.0</option>
<option value="v0.57.0">v0.57.0</option>
<option value="v0.56.0">v0.56.0</option>
<option value="v0.55.0">v0.55.0</option>
<option value="v0.54.0">v0.54.0</option>
<option value="v0.53.0">v0.53.0</option>
<option value="v0.51.0">v0.51.0</option>
<option value="v0.50.0">v0.50.0</option>
<option value="v0.49.0">v0.49.0</option>
<option value="v0.48.0">v0.48.0</option>
<option value="v0.47.0">v0.47.0</option>
<option value="v0.46.0">v0.46.0</option>
<option value="v0.45.0">v0.45.0</option>
<option value="v0.44.0">v0.44.0</option>
<option value="v0.41.0">v0.41.0</option>
<option value="v0.40.0">v0.40.0</option>
<option value="0.52.0">0.52.0</option>
</select>


      <ul class="navigation">
        <li><a href="" class="is-selected">Documentation</a></li>
        <li><a href="../api/v0.61.0/api/index.html">API</a></li>
      </ul>

      <hr />

      <form accept-charset="UTF-8" action="/docs/v0.61.0/search" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
        <input class="sidebar-search-field" id="q" name="q" placeholder="Search documentation" type="text" value="" />
</form>
      <h2>
<a name="guides" href="creating-a-theme.html#guides"></a>Guides</h2>

<ul>
<li><a href="getting-started.html">Getting Started</a></li>
<li><a href="customizing-atom.html">Customizing Atom</a></li>
<li><a href="creating-a-package.html">Creating a Package</a></li>
<li><a href="creating-a-theme.html">Creating a Theme</a></li>
<li><a href="publishing-a-package.html">Publishing a Package</a></li>
<li><a href="converting-a-text-mate-bundle.html">Converting a TextMate Bundle</a></li>
<li><a href="converting-a-text-mate-theme.html">Converting a TextMate Theme</a></li>
<li><a href="contributing.html">Contributing</a></li>
</ul><h3>
<a name="advanced-topics" href="creating-a-theme.html#advanced-topics"></a>Advanced Topics</h3>

<ul>
<li><a href="advanced/configuration.html">Configuration</a></li>
<li><a href="advanced/keymaps.html">Keymaps</a></li>
<li><a href="advanced/serialization.html">Serialization</a></li>
<li><a href="advanced/view-system.html">View System</a></li>
</ul>
    </div>
  </div>
</div>


    <div class="footer-pad"></div>
  </div>

  <footer>
  <div class="footer">
    <div class="wrapper">
      <ul class="footer-left">
        <li><a href="../../terms.html">Terms of Use</a></li>
          <li><a href="https://atom.io/login">Sign in</a></li>
      </ul>

      <div class="footer-right">
        <a href="https://github.com"><span class="octicon octicon-code"></span> with <span class="octicon octicon-heart"></span> by <span class="octicon octicon-logo-github"></span></a>
      </div>
    </div>
  </div>
</footer>

</body>
</html>
